import React, { FC,  } from "react";
import useGetDeviceTotalData from "@/hooks/useGetDeviceTotalData";
import type {
  DeviceTotalPropsType,
  DeviceTotalResponseType,
} from "@/types/echartInterface";
import { Spin } from "antd";
import styles from "./css/run_analysis.module.scss";
import icon1 from "@/asset/images/icon6.png";
import icon2 from "@/asset/images/icon7.png";
import icon3 from "@/asset/images/icon8.png";
import icon4 from "@/asset/images/icon9.png";
const RunAnalysisView: FC<DeviceTotalPropsType> = (
  props: DeviceTotalPropsType
) => {
  const { times } = props;
  const { data, loading } = useGetDeviceTotalData(times);
  const {
    deviceAccessNum = 0,
    adjustableDailyLoadNum = 0,
    offLineDeviceNum = 0,
    downDeviceNum = 0,
    noDataDeviceNum = 0,
  } = data as DeviceTotalResponseType;
  return (
    <>
      {loading && (
        <div style={{ textAlign: "center", marginTop: "50px" }}>
          <Spin />
        </div>
      )}
      {!loading && (
        <div className={styles.container}>
          <div className={styles.left}>
            <div className={styles.left_top}>
              <img src={icon1} alt="" />
              <div className={styles.title_area}>
                <div>
                  <span>{deviceAccessNum}</span>
                  <span>次</span>
                </div>
                <div>当前设备接入数</div>
              </div>
            </div>
            <div className={styles.left_bottom}>
              <img src={icon2} alt="" />
              <div className={styles.title_area}>
                <div>
                  <span>{downDeviceNum}</span>
                  <span>%</span>
                </div>
                <div>当日下发成功率</div>
              </div>
            </div>
          </div>
          <div className={styles.center}>
            <div className={styles.box}></div>
            <div className={styles.txt_area}>
              <div>{adjustableDailyLoadNum}</div>
              <div>当日可负荷调节</div>
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.right_top}>
              <img src={icon3} alt="" />

              <div className={styles.title_area}>
                <div>
                  <span>{offLineDeviceNum}</span>
                  <span style={{ right: "24px" }}>台</span>
                </div>
                <div>长时间离线设备统计</div>
              </div>
            </div>
            <div className={styles.right_bottom}>
              <img src={icon4} alt="" />
              <div className={styles.title_area}>
                <div>
                  <span>{noDataDeviceNum}</span>
                  <span style={{ right: "24px" }}>台</span>
                </div>
                <div>无数据上报设备统计</div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default RunAnalysisView;
